var SearchBtns = function () {
  var template = /* html */ `
    <div class="search-btns header-btns clearfix">
      <template v-if="totalPage>1">
        <div>
          <el-button size="medium" type="primary" :disabled="pagination.currentPage<=1" @click="toPage('pre')">上一页</el-button>
        </div>
        <div>
          <el-button size="medium" type="primary" :disabled="pagination.currentPage>=totalPage" @click="toPage('next')">下一页</el-button>
        </div>
      </template>

      <div v-if="hasSearch" style="margin-left:30px">
        <el-popover v-if="mode==='popover'" v-model="isShowPopover" :title="searchTitle" :width="popoverWidth" trigger="click" placement="right" @after-leave="afterLeave"
          popper-class="search-btns-propper">
          <el-button size="medium" type="primary" slot="reference">{{searchBtnText}}</el-button>
          <slot name="search" :visible="isShowPopover"></slot>
        </el-popover>

        <template v-else-if="mode==='dialog'">
          <el-button size="medium" type="primary" @click="isShowPopover=true">{{searchBtnText}}</el-button>
          <el-dialog append-to-body :title="searchTitle" :visible.sync="isShowPopover" top="0" width="100%" @closed="afterLeave">
            <div style="max-height:calc(100vh - 54px);overflow:auto">
              <slot name="search" :visible="isShowPopover"></slot>
            </div>
          </el-dialog>
        </template>
      </div>

      <slot name="append"></slot>
    </div>
  `;

  return {
    props: {
      hasSearch: {
        type: Boolean,
        default: false
      },
      popoverWidth: {
        type: Number,
        default: 400
      },
      searchBtnText: {
        type: String,
        default: '时间段选项'
      },
      searchTitle: {
        type: String,
        default: '请选择时间段'
      },
      pagination: {
        type: Object
      },
      hasScroll: {
        type: Boolean,
        default: false
      },
      mode:{
        type:String,
        default:'popover'
      }
    },

    computed: {
      totalPage: function () {
        var pagination = this.pagination;
        if (SysUtil.isEmpty(pagination)) {
          return 0;
        }
        var totalPage = pagination.totalCount / pagination.pageSize;
        totalPage = Math.ceil(_.round(totalPage, 2));
        return totalPage;
      }
    },

    data: function () {
      return {
        isShowPopover: false
      };
    },

    methods: {
      toPage: function (type) {
        if (this.hasScroll) {
          return;
        }
        var currentPage = this.pagination.currentPage;
        if (type === 'pre') {
          currentPage--;
          if (currentPage < 1) {
            currentPage = 1;
          }
        } else if (type === 'next') {
          currentPage++;
          if (currentPage > this.totalPage) {
            currentPage = this.totalPage;
          }
        }
        this.pagination.currentPage = currentPage;
        this.$emit('pagination-change', this.pagination);
      },

      closePopover: function () {
        this.isShowPopover = false;
      },

      afterLeave:function(){
        this.$emit('after-leave');
      }
    },

    template: template
  };
}();
